Portfolio Website

The Idea

After finishing up my game, I stumbled onto some online portfolio websites where developers decided to showcase their achievements, projects, etc onto a website they made. This inspired me to do the same as well. Using HTML, CSS, and Javascript, I made a simple website to showcase my achievements.

The Learning Process

The learning process wasn't as rough as when I made my game. Making a website is relatively easier. HTML and CSS are not that hard because if you understand the basics of it, you can do quite a lot. PHP is not too bad but there are still a lot on the application side of it for me to learn. Managing the contact form has also taught me about JSON and javascript files. JSON files are files with data in it that is transported from server to website and vice versa.

Once again, the parent and child element is also an essential part here. However, the inheritance part does apply HTML tags. If tag #1 is a child of tag #2, #1 would inherit the base CSS declarations (properties and values). Thus we can overwrite the parent's declaration, properties, or/and values inside of the child's selector if we want. This stumped me for a while until I realized this.

I realized that after learning the basics of programming, it is so much easier to learn a new language. The main differences to a new language are often only the syntax and maybe the applications of the language and how it is used. Most languages often have very similar things and basics within them.

Uploading this website online was relatively easy as I used Firebase, an easy to access online database and back-end service. I could very easily host my website using Firebase for free. I also bought a domain name for $8.88 USD per year at NameCheap.

The Challenges

The most challenging part was applying firebase hosting, functions, emulators, databases for the contact form to work. This requires decent knowledge of Firebase, Javascript, and NodeJS. Using the command line to run different command lines with Firebase is fairly interesting as doing so makes everything a lot easier. For example, If I want to deploy the website, I can just type the 1st command to send all the necessary files within the public folder and upload it to the internet.

The 2nd command allows me to host the website locally on localhost, which is the computer I am currently using. With this, I can test the site locally. One important thing to note was to disable cache on Google devtools. This prevents the data and stored cached from updating.

Understanding what a package manager like npm is a big takeaway too. To import a package (pre-made code files) online onto our projects, we can use the following comamand. This makes it a lot easier because we won't have to create our functions and packages. NodeJS is very confusing at first but it is a way to run server-side code outside of the browser. This gave me a lot of new insights to installing packages via the command line and what npm means. I think this is the greatest takeaway because learning NodeJS and understanding package managers and dependencies are imperative to becoming better.

The Extensions

This project has also taught me more about Visual Studio Code, especially with the highly sought after HTML shortcut extensions. Some extensions I use for HTML and CSS are:

• Auto Rename Tag
• CSS Peek
• HTML Tag Wrapper
• Live Server